import SliderWithValue from "@/components/ui/SliderWithValue";
import { MaterialIcons } from "@expo/vector-icons";
import { useState } from "react";
import {
    ScrollView,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View,
} from "react-native";
import ColorPicker from "react-native-wheel-color-picker";

// 字体分类
const FONT_CATEGORIES = [
  { id: "hot", label: "热门" },
  { id: "simple", label: "简体" },
  { id: "traditional", label: "繁体" },
  { id: "english", label: "英文" },
  { id: "japanese", label: "日文" },
  { id: "korean", label: "韩文" },
];

// 字体列表示例
const FONTS = [
  { id: "default", name: "默认", category: "hot" },
  { id: "heiti", name: "黑体", category: "simple" },
  { id: "songti", name: "宋体", category: "simple" },
  { id: "fangsong", name: "仿宋", category: "traditional" },
  { id: "kaiti", name: "楷体", category: "traditional" },
  { id: "arial", name: "Arial", category: "english" },
  { id: "times", name: "Times", category: "english" },
];

// 主分类标签
const MAIN_CATEGORIES = [
  { id: "fancy", label: "花字" },
  { id: "font", label: "字体" },
  { id: "style", label: "样式" },
  { id: "layout", label: "排版" },
];

// 花字分类
const FANCY_CATEGORIES = [
  { id: "hot", label: "热门" },
  { id: "festival", label: "节日" },
  { id: "emotion", label: "情感" },
  { id: "business", label: "商务" },
];

// 样式选项
const STYLE_OPTIONS = {
  text: { label: "文本", icon: "text-fields" as const },
  stroke: { label: "描边", icon: "brush" as const },
  shadow: { label: "阴影", icon: "blur-on" as const },
  light: { label: "发光", icon: "wb-sunny" as const },
  background: { label: "背景", icon: "format-color-fill" as const },
  transform: { label: "变形", icon: "transform" as const },
};

// 排版选项
const LAYOUT_OPTIONS = {
  horizontalAlignment: [
    { id: "left", label: "居左", icon: "format-align-left" as const },
    { id: "center", label: "居中", icon: "format-align-center" as const },
    { id: "right", label: "居右", icon: "format-align-right" as const },
  ],
  verticalAlignment: [
    { id: "top", label: "居顶", icon: "vertical-align-top" as const },
    { id: "middle", label: "居中", icon: "vertical-align-center" as const },
    { id: "bottom", label: "居底", icon: "vertical-align-bottom" as const },
  ],
  lineSpacing: {
    min: 0,
    max: 100,
    default: 0,
  },
  letterSpacing: {
    min: 0,
    max: 100,
    default: 0,
  },
};

// 花字示例
type FancyCategory = "hot" | "festival" | "emotion" | "business";
interface FancyText {
  id: string;
  text: string;
  preview: string;
}

const FANCY_TEXTS: Record<FancyCategory, FancyText[]> = {
  hot: [
    { id: "fancy1", text: "𝓗𝓮𝓵𝓵𝓸", preview: "Hello" },
    { id: "fancy2", text: "𝔊𝔬𝔬𝔡", preview: "Good" },
    { id: "fancy3", text: "𝕎𝕠𝕣𝕝𝕕", preview: "World" },
  ],
  festival: [
    { id: "newyear", text: "🎊新年快乐🎊", preview: "新年快乐" },
    { id: "christmas", text: "🎄圣诞快乐🎄", preview: "圣诞快乐" },
  ],
  emotion: [
    { id: "love", text: "❤️爱你❤️", preview: "爱你" },
    { id: "happy", text: "😊开心😊", preview: "开心" },
  ],
  business: [
    { id: "sale", text: "🏷️特惠🏷️", preview: "特惠" },
    { id: "new", text: "✨新品✨", preview: "新品" },
  ],
};

interface TextEditorProps {
  onTextChange?: (textData: {
    text: string;
    fontFamily: string;
    fontSize: number;
    color: string;
    style: any;
  }) => void;
  currentTab?: string;
}

export default function TextEditor({
  onTextChange,
  currentTab = "font",
}: TextEditorProps) {
  const bottomHeight = 34;
  const [text, setText] = useState("");
  const [fontCategory, setFontCategory] = useState("hot");
  const [styleCategory, setStyleCategory] = useState("text");
  const [fancyCategory, setFancyCategory] = useState<FancyCategory>("hot");
  const [selectedFont, setSelectedFont] = useState(FONTS[0].id);
  const [selectedStyle, setSelectedStyle] = useState({
    fontWeight: "normal" as "normal" | "bold",
    fontStyle: "normal" as "normal" | "italic",
    textDecorationLine: "none" as "none" | "underline" | "line-through",
    showPinyin: false,
  });
  const [selectedColor, setSelectedColor] = useState("#000000");
  const [showColorPicker, setShowColorPicker] = useState(false);
  const [fontSize, setFontSize] = useState(72);
  const [lineSpacing, setLineSpacing] = useState(0);
  const [letterSpacing, setLetterSpacing] = useState(0);
  
  // 样式滑块状态
  const [opacity, setOpacity] = useState(100);
  const [strokeWidth, setStrokeWidth] = useState(0);
  const [shadowBlur, setShadowBlur] = useState(0);
  const [shadowDistance, setShadowDistance] = useState(0);
  const [shadowAngle, setShadowAngle] = useState(0);
  const [lightIntensity, setLightIntensity] = useState(0);
  const [lightRange, setLightRange] = useState(0);
  const [backgroundRadius, setBackgroundRadius] = useState(0);
  const [backgroundPadding, setBackgroundPadding] = useState(0);
  const [transformRotate, setTransformRotate] = useState(0);
  const [transformSkew, setTransformSkew] = useState(0);
  const [transformScale, setTransformScale] = useState(1);



  // 更新文字数据
  const updateTextData = () => {
    onTextChange?.({
      text,
      fontFamily: selectedFont,
      fontSize: fontSize,
      color: "#000000",
      style: selectedStyle,
    });
  };

  // 渲染字体内容
  const renderFontContent = () => (
    <View>
      {/* 字体分类 */}
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        style={styles.optionsScroll}
        contentContainerStyle={styles.optionsContent}
      >
        {FONT_CATEGORIES.map((category) => (
          <TouchableOpacity
            key={category.id}
            style={[
              styles.optionItem,
              fontCategory === category.id && styles.optionItemSelected,
            ]}
            onPress={() => setFontCategory(category.id)}
          >
            <Text
              style={[
                styles.optionText,
                fontCategory === category.id && styles.optionTextSelected,
              ]}
            >
              {category.label}
            </Text>
          </TouchableOpacity>
        ))}
      </ScrollView>

      {/* 字体列表 */}
      <ScrollView style={styles.fontsContainer}>
        <View style={styles.fontsGrid}>
          {FONTS.filter((font) => font.category === fontCategory).map(
            (font) => (
              <TouchableOpacity
                key={font.id}
                style={[
                  styles.fontItem,
                  selectedFont === font.id && styles.fontItemSelected,
                ]}
                onPress={() => {
                  setSelectedFont(font.id);
                  updateTextData();
                }}
              >
                <View style={styles.fontPreview}>
                  <Text
                    style={[styles.fontPreviewText, { fontFamily: font.id }]}
                  >
                    文字
                  </Text>
                </View>
                <Text style={styles.fontName}>{font.name}</Text>
              </TouchableOpacity>
            )
          )}
        </View>
      </ScrollView>
    </View>
  );

  // 渲染样式内容
  const renderStyleContent = () => (
    <View>
      {/* 样式分类 */}
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        style={styles.optionsScroll}
        contentContainerStyle={styles.optionsContent}
      >
        {Object.entries(STYLE_OPTIONS).map(([key, option]) => (
          <TouchableOpacity
            key={key}
            style={[
              styles.optionItem,
              styleCategory === key && styles.optionItemSelected,
            ]}
            onPress={() => {
              setStyleCategory(key);
              updateTextData();
            }}
          >
            <Text
              style={[
                styles.optionText,
                styleCategory === key && styles.optionTextSelected,
              ]}
            >
              {option.label}
            </Text>
          </TouchableOpacity>
        ))}
      </ScrollView>

      {/* 样式内容 */}
      <ScrollView style={styles.fontsContainer}>
        <View style={styles.fontsGrid}>
          <View style={styles.styleControls}>
            {/* 文本样式 */}
            {styleCategory === "text" && (
              <>
                <ScrollView
                  horizontal
                  showsHorizontalScrollIndicator={false}
                  style={styles.colorGrid}
                >
                  <TouchableOpacity
                    style={styles.moreColorsButton}
                    onPress={() => setShowColorPicker(true)}
                  >
                    <MaterialIcons name="color-lens" size={20} color="#666" />
                  </TouchableOpacity>
                  {[
                    "#000000",
                    "#FFFFFF",
                    "#FF0000",
                    "#00FF00",
                    "#0000FF",
                    "#FFFF00",
                    "#FF00FF",
                    "#00FFFF",
                  ].map((color) => (
                    <TouchableOpacity
                      key={color}
                      style={[styles.colorButton, { backgroundColor: color }]}
                      onPress={() => {
                        setSelectedColor(color);
                        updateTextData();
                      }}
                    />
                  ))}
                </ScrollView>
                <View style={styles.controlRow}>
                  <Text style={styles.controlLabel}>字号</Text>
                  <View style={styles.numberInput}>
                    <TouchableOpacity
                      style={styles.numberButton}
                      onPress={() => {
                        const newSize = Math.max(8, fontSize - 1);
                        setFontSize(newSize);
                        updateTextData();
                      }}
                    >
                      <Text style={styles.numberButtonText}>-</Text>
                    </TouchableOpacity>
                    <TextInput
                      style={styles.numberValue}
                      value={fontSize.toString()}
                      onChangeText={(value) => {
                        const numValue = parseInt(value) || 8;
                        if (numValue >= 8 && numValue <= 200) {
                          setFontSize(numValue);
                          updateTextData();
                        }
                      }}
                      keyboardType="numeric"
                      selectTextOnFocus={true}
                    />
                    <TouchableOpacity
                      style={styles.numberButton}
                      onPress={() => {
                        const newSize = Math.min(200, fontSize + 1);
                        setFontSize(newSize);
                        updateTextData();
                      }}
                    >
                      <Text style={styles.numberButtonText}>+</Text>
                    </TouchableOpacity>
                  </View>
                </View>

                {/* 字体样式按钮 */}
                <View style={styles.fontStyleContainer}>
                  <TouchableOpacity
                    style={[
                      styles.fontStyleButton,
                      selectedStyle.fontWeight === "bold" &&
                        styles.fontStyleButtonActive,
                    ]}
                    onPress={() => {
                      setSelectedStyle((prev) => ({
                        ...prev,
                        fontWeight:
                          prev.fontWeight === "bold" ? "normal" : "bold",
                      }));
                      updateTextData();
                    }}
                  >
                    <MaterialIcons
                      name="format-bold"
                      size={16}
                      color={
                        selectedStyle.fontWeight === "bold" ? "#fff" : "#666"
                      }
                    />
                    <Text
                      style={[
                        styles.fontStyleLabel,
                        selectedStyle.fontWeight === "bold" && {
                          color: "#fff",
                        },
                      ]}
                    >
                      粗体
                    </Text>
                  </TouchableOpacity>

                  <TouchableOpacity
                    style={[
                      styles.fontStyleButton,
                      selectedStyle.fontStyle === "italic" &&
                        styles.fontStyleButtonActive,
                    ]}
                    onPress={() => {
                      setSelectedStyle((prev) => ({
                        ...prev,
                        fontStyle:
                          prev.fontStyle === "italic" ? "normal" : "italic",
                      }));
                      updateTextData();
                    }}
                  >
                    <MaterialIcons
                      name="format-italic"
                      size={16}
                      color={
                        selectedStyle.fontStyle === "italic" ? "#fff" : "#666"
                      }
                    />
                    <Text
                      style={[
                        styles.fontStyleLabel,
                        selectedStyle.fontStyle === "italic" && {
                          color: "#fff",
                        },
                      ]}
                    >
                      斜体
                    </Text>
                  </TouchableOpacity>

                  <TouchableOpacity
                    style={[
                      styles.fontStyleButton,
                      selectedStyle.textDecorationLine === "underline" &&
                        styles.fontStyleButtonActive,
                    ]}
                    onPress={() => {
                      setSelectedStyle((prev) => ({
                        ...prev,
                        textDecorationLine:
                          prev.textDecorationLine === "underline"
                            ? "none"
                            : "underline",
                      }));
                      updateTextData();
                    }}
                  >
                    <MaterialIcons
                      name="format-underlined"
                      size={16}
                      color={
                        selectedStyle.textDecorationLine === "underline"
                          ? "#fff"
                          : "#666"
                      }
                    />
                    <Text
                      style={[
                        styles.fontStyleLabel,
                        selectedStyle.textDecorationLine === "underline" && {
                          color: "#fff",
                        },
                      ]}
                    >
                      下划线
                    </Text>
                  </TouchableOpacity>

                  <TouchableOpacity
                    style={[
                      styles.fontStyleButton,
                      selectedStyle.textDecorationLine === "line-through" &&
                        styles.fontStyleButtonActive,
                    ]}
                    onPress={() => {
                      setSelectedStyle((prev) => ({
                        ...prev,
                        textDecorationLine:
                          prev.textDecorationLine === "line-through"
                            ? "none"
                            : "line-through",
                      }));
                      updateTextData();
                    }}
                  >
                    <MaterialIcons
                      name="format-strikethrough"
                      size={16}
                      color={
                        selectedStyle.textDecorationLine === "line-through"
                          ? "#fff"
                          : "#666"
                      }
                    />
                    <Text
                      style={[
                        styles.fontStyleLabel,
                        selectedStyle.textDecorationLine === "line-through" && {
                          color: "#fff",
                        },
                      ]}
                    >
                      删除线
                    </Text>
                  </TouchableOpacity>

                  <TouchableOpacity
                    style={[
                      styles.fontStyleButton,
                      selectedStyle.showPinyin && styles.fontStyleButtonActive,
                    ]}
                    onPress={() => {
                      setSelectedStyle((prev) => ({
                        ...prev,
                        showPinyin: !prev.showPinyin,
                      }));
                      updateTextData();
                    }}
                  >
                    <MaterialIcons
                      name="translate"
                      size={16}
                      color={selectedStyle.showPinyin ? "#fff" : "#666"}
                    />
                    <Text
                      style={[
                        styles.fontStyleLabel,
                        selectedStyle.showPinyin && { color: "#fff" },
                      ]}
                    >
                      拼音
                    </Text>
                  </TouchableOpacity>
                </View>

                <SliderWithValue
                  label="透明度"
                  value={opacity}
                  minimumValue={0}
                  maximumValue={100}
                  onValueChange={setOpacity}
                  onSlidingComplete={updateTextData}
                  suffix="%"
                />
              </>
            )}

            {/* 描边样式 */}
            {styleCategory === "stroke" && (
              <>
                <ScrollView
                  horizontal
                  showsHorizontalScrollIndicator={false}
                  style={styles.colorGrid}
                >
                  <TouchableOpacity
                    style={styles.moreColorsButton}
                    onPress={() => setShowColorPicker(true)}
                  >
                    <MaterialIcons name="color-lens" size={20} color="#666" />
                  </TouchableOpacity>
                  {["#000000", "#FFFFFF", "#FF0000", "#00FF00", "#0000FF"].map(
                    (color) => (
                      <TouchableOpacity
                        key={color}
                        style={[styles.colorButton, { backgroundColor: color }]}
                        onPress={() => {
                          setSelectedColor(color);
                          updateTextData();
                        }}
                      />
                    )
                  )}
                </ScrollView>
                <SliderWithValue
                  label="描边宽度"
                  value={strokeWidth}
                  minimumValue={0}
                  maximumValue={10}
                  onValueChange={setStrokeWidth}
                  onSlidingComplete={updateTextData}
                />
              </>
            )}

            {/* 阴影样式 */}
            {styleCategory === "shadow" && (
              <>
                <ScrollView
                  horizontal
                  showsHorizontalScrollIndicator={false}
                  style={styles.colorGrid}
                >
                  <TouchableOpacity
                    style={styles.moreColorsButton}
                    onPress={() => setShowColorPicker(true)}
                  >
                    <MaterialIcons name="color-lens" size={20} color="#666" />
                  </TouchableOpacity>
                  {["#000000", "#333333", "#666666", "#999999"].map((color) => (
                    <TouchableOpacity
                      key={color}
                      style={[styles.colorButton, { backgroundColor: color }]}
                      onPress={() => {
                        setSelectedColor(color);
                        updateTextData();
                      }}
                    />
                  ))}
                </ScrollView>
                <SliderWithValue
                  label="模糊"
                  value={shadowBlur}
                  minimumValue={0}
                  maximumValue={20}
                  onValueChange={setShadowBlur}
                  onSlidingComplete={updateTextData}
                />
                <SliderWithValue
                  label="距离"
                  value={shadowDistance}
                  minimumValue={0}
                  maximumValue={20}
                  onValueChange={setShadowDistance}
                  onSlidingComplete={updateTextData}
                />
                <SliderWithValue
                  label="角度"
                  value={shadowAngle}
                  minimumValue={0}
                  maximumValue={360}
                  onValueChange={setShadowAngle}
                  onSlidingComplete={updateTextData}
                  suffix="°"
                />
              </>
            )}

            {/* 发光样式 */}
            {styleCategory === "light" && (
              <>
                <ScrollView
                  horizontal
                  showsHorizontalScrollIndicator={false}
                  style={styles.colorGrid}
                >
                  <TouchableOpacity
                    style={styles.moreColorsButton}
                    onPress={() => setShowColorPicker(true)}
                  >
                    <MaterialIcons name="color-lens" size={20} color="#666" />
                  </TouchableOpacity>
                  {[
                    "#FF0000",
                    "#00FF00",
                    "#0000FF",
                    "#FFFF00",
                    "#FF00FF",
                    "#00FFFF",
                  ].map((color) => (
                    <TouchableOpacity
                      key={color}
                      style={[styles.colorButton, { backgroundColor: color }]}
                      onPress={() => {
                        setSelectedColor(color);
                        updateTextData();
                      }}
                    />
                  ))}
                </ScrollView>
                <SliderWithValue
                  label="强度"
                  value={lightIntensity}
                  minimumValue={0}
                  maximumValue={100}
                  onValueChange={setLightIntensity}
                  onSlidingComplete={updateTextData}
                />
                <SliderWithValue
                  label="范围"
                  value={lightRange}
                  minimumValue={0}
                  maximumValue={50}
                  onValueChange={setLightRange}
                  onSlidingComplete={updateTextData}
                />
              </>
            )}

            {/* 背景样式 */}
            {styleCategory === "background" && (
              <>
                <ScrollView
                  horizontal
                  showsHorizontalScrollIndicator={false}
                  style={styles.colorGrid}
                >
                  <TouchableOpacity
                    style={styles.moreColorsButton}
                    onPress={() => setShowColorPicker(true)}
                  >
                    <MaterialIcons name="color-lens" size={20} color="#666" />
                  </TouchableOpacity>
                  {["#FFFFFF", "#F5F5F5", "#EEEEEE", "#E0E0E0"].map((color) => (
                    <TouchableOpacity
                      key={color}
                      style={[styles.colorButton, { backgroundColor: color }]}
                      onPress={() => {
                        setSelectedColor(color);
                        updateTextData();
                      }}
                    />
                  ))}
                </ScrollView>
                <SliderWithValue
                  label="圆角"
                  value={backgroundRadius}
                  minimumValue={0}
                  maximumValue={50}
                  onValueChange={setBackgroundRadius}
                  onSlidingComplete={updateTextData}
                  labelMinWidth={48}
                />
                <SliderWithValue
                  label="内边距"
                  value={backgroundPadding}
                  minimumValue={0}
                  maximumValue={50}
                  onValueChange={setBackgroundPadding}
                  onSlidingComplete={updateTextData}
                  labelMinWidth={48}
                />
              </>
            )}

            {/* 变形样式 */}
            {styleCategory === "transform" && (
              <>
                <SliderWithValue
                  label="旋转"
                  value={transformRotate}
                  minimumValue={0}
                  maximumValue={360}
                  onValueChange={setTransformRotate}
                  onSlidingComplete={updateTextData}
                  suffix="°"
                />
                <SliderWithValue
                  label="倾斜"
                  value={transformSkew}
                  minimumValue={-45}
                  maximumValue={45}
                  onValueChange={setTransformSkew}
                  onSlidingComplete={updateTextData}
                  suffix="°"
                />
                <SliderWithValue
                  label="缩放"
                  value={transformScale}
                  minimumValue={0.5}
                  maximumValue={2}
                  onValueChange={setTransformScale}
                  onSlidingComplete={updateTextData}
                  step={0.1}
                />
              </>
            )}
          </View>
        </View>
      </ScrollView>
    </View>
  );

  // 渲染排版内容
  const renderLayoutContent = () => (
    <View style={styles.layoutContainer}>
      {/* 对齐方式 */}
      <View style={styles.spacingControl}>
        <View style={styles.allAlignmentContainer}>
          {LAYOUT_OPTIONS.horizontalAlignment.map((align) => (
            <TouchableOpacity
              key={align.id}
              style={styles.alignmentButton}
              onPress={() => updateTextData()}
            >
              <View style={styles.alignmentIcon}>
                <MaterialIcons name={align.icon} size={18} color="#666" />
              </View>
              <Text style={styles.alignmentText}>{align.label}</Text>
            </TouchableOpacity>
          ))}

          <View style={styles.alignmentSeparator} />

          {LAYOUT_OPTIONS.verticalAlignment.map((align) => (
            <TouchableOpacity
              key={align.id}
              style={styles.alignmentButton}
              onPress={() => updateTextData()}
            >
              <View style={styles.alignmentIcon}>
                <MaterialIcons name={align.icon} size={18} color="#666" />
              </View>
              <Text style={styles.alignmentText}>{align.label}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </View>

      {/* 行间距 */}
      <SliderWithValue
        label="行间距"
        value={lineSpacing}
        minimumValue={LAYOUT_OPTIONS.lineSpacing.min}
        maximumValue={LAYOUT_OPTIONS.lineSpacing.max}
        onValueChange={setLineSpacing}
        onSlidingComplete={updateTextData}
      />

      {/* 字间距 */}
      <SliderWithValue
        label="字间距"
        value={letterSpacing}
        minimumValue={LAYOUT_OPTIONS.letterSpacing.min}
        maximumValue={LAYOUT_OPTIONS.letterSpacing.max}
        onValueChange={setLetterSpacing}
        onSlidingComplete={updateTextData}
      />
    </View>
  );

  // 渲染花字内容
  const renderFancyContent = () => (
    <View>
      {/* 花字分类 */}
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        style={styles.optionsScroll}
        contentContainerStyle={styles.optionsContent}
      >
        {FANCY_CATEGORIES.map((category) => (
          <TouchableOpacity
            key={category.id}
            style={[
              styles.optionItem,
              fancyCategory === category.id && styles.optionItemSelected,
            ]}
            onPress={() => setFancyCategory(category.id as FancyCategory)}
          >
            <Text
              style={[
                styles.optionText,
                fancyCategory === category.id && styles.optionTextSelected,
              ]}
            >
              {category.label}
            </Text>
          </TouchableOpacity>
        ))}
      </ScrollView>

      {/* 花字列表 */}
      <ScrollView style={styles.fontsContainer}>
        <View style={styles.fontsGrid}>
          {FANCY_TEXTS[fancyCategory].map((item) => (
            <TouchableOpacity
              key={item.id}
              style={styles.fontItem}
              onPress={() => {
                setText(item.text);
                updateTextData();
              }}
            >
              <View style={styles.fontPreview}>
                <Text style={styles.fontPreviewText}>{item.preview}</Text>
              </View>
              <Text style={styles.fontName}>{item.text}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>
    </View>
  );

  return (
    <View style={styles.container}>
      {/* 根据当前标签页显示不同内容 */}
      {currentTab === "fancy" && renderFancyContent()}
      {currentTab === "font" && renderFontContent()}
      {currentTab === "style" && renderStyleContent()}
      {currentTab === "layout" && renderLayoutContent()}

      {/* 颜色选择器弹出层 */}
      {showColorPicker && (
        <View
          style={[styles.colorPickerModal, { paddingBottom: bottomHeight }]}
        >
          <View style={styles.colorPickerHeader}>
            <Text style={styles.colorPickerTitle}>选择颜色</Text>
            <TouchableOpacity onPress={() => setShowColorPicker(false)}>
              <MaterialIcons name="close" size={24} color="#666" />
            </TouchableOpacity>
          </View>
          <View style={styles.colorPickerContainer}>
            <ColorPicker
              color={selectedColor}
              onColorChange={(color) => {
                setSelectedColor(color);
                updateTextData();
              }}
              thumbSize={30}
              sliderSize={30}
              noSnap={true}
              row={false}
              swatches={false}
              discrete={false}
            />
          </View>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    paddingBottom: 20,
  },

  optionsScroll: {
    flexGrow: 0,
  },
  optionsContent: {
    paddingHorizontal: 16,
  },
  optionItem: {
    marginRight: 24,
  },
  optionItemSelected: {},
  optionText: {
    fontSize: 14,
    color: "#999",
    fontWeight: "400",
  },
  optionTextSelected: {
    color: "#222",
    fontWeight: "400",
  },
  fontsContainer: {
    backgroundColor: "#fff",
    maxHeight: 300,
  },
  fontsGrid: {
    flexDirection: "row",
    flexWrap: "wrap",
    paddingHorizontal: 10,
    paddingTop: 12,
    width: "100%",
  },
  fontItem: {
    width: "20%",
    alignItems: "center",
  },
  fontItemSelected: {
    backgroundColor: "#f5f5f5",
    borderRadius: 8,
  },
  fontPreview: {
    width: 60,
    height: 60,
    borderRadius: 8,
    backgroundColor: "#f9f9f9",
    justifyContent: "center",
    alignItems: "center",
  },
  fontPreviewText: {
    fontSize: 24,
  },
  fontName: {
    fontSize: 12,
    color: "#666",
    textAlign: "center",
  },
  styleControls: {
    width: "100%",
    paddingHorizontal: 10,
  },
  controlRow: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 15,
    width: "100%",
  },
  controlLabel: {
    fontSize: 12,
    color: "#666",
    marginRight: 15,
  },
  slider: {
    flex: 1,
  },
  numberInput: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#f5f5f5",
    borderRadius: 6,
    paddingHorizontal: 6,
    height: 35,
    lineHeight: 35,
  },
  numberButton: {
    width: 32,
    height: 32,
    justifyContent: "center",
    alignItems: "center",
  },
  numberButtonText: {
    fontSize: 20,
    color: "#666",
  },
  numberValue: {
    fontSize: 14,
    color: "#222",
    marginHorizontal: 4,
    textAlign: "center",
    textAlignVertical: "center",
    minWidth: 30,
    height: 32,
    paddingVertical: 0,
  },
  colorGrid: {
    flexDirection: "row",
    marginBottom: 15,
  },
  colorButton: {
    width: 20,
    height: 20,
    borderRadius: 10,
    marginRight: 8,
    borderWidth: 1,
    borderColor: "#eee",
  },
  moreColorsButton: {
    width: 20,
    height: 20,
    borderRadius: 10,
    backgroundColor: "#f5f5f5",
    justifyContent: "center",
    alignItems: "center",
    marginRight: 8,
  },
  colorPreview: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#f5f5f5",
    padding: 12,
    borderRadius: 8,
    marginBottom: 20,
  },
  currentColor: {
    width: 24,
    height: 24,
    borderRadius: 12,
    marginRight: 8,
    borderWidth: 1,
    borderColor: "#eee",
  },
  colorLabel: {
    fontSize: 14,
    color: "#666",
  },
  colorPickerModal: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "#fff",
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    padding: 16,
  },
  colorPickerHeader: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: 16,
  },
  colorPickerTitle: {
    fontSize: 16,
    color: "#222",
    fontWeight: "500",
  },
  colorPickerContainer: {
    height: 200,
    marginBottom: 20,
  },
  layoutContainer: {
    paddingHorizontal: 15,
  },
  allAlignmentContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  alignmentSeparator: {
    width: 20,
  },
  alignmentButton: {
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
  },
  alignmentIcon: {
    width: 35,
    height: 35,
    borderRadius: 6,
    backgroundColor: "#f5f5f5",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 4,
  },
  alignmentText: {
    fontSize: 10,
    color: "#666",
    textAlign: "center",
  },
  spacingControl: {
    width: "100%",
    marginBottom: 15,
  },

  fontStyleContainer: {
    flexDirection: "row",
    paddingTop: 0,
    paddingBottom: 15,
    gap: 6,
  },
  fontStyleButton: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: 8,
    height: 35,
    borderRadius: 6,
    backgroundColor: "#f5f5f5",
    gap: 4,
  },
  fontStyleButtonActive: {
    backgroundColor: "#000000",
  },
  fontStyleLabel: {
    fontSize: 12,
    color: "#666",
    fontWeight: "500",
  },
});
